<template>
  <div>
    <div>
      <video :src="mvUrl" controls="controls" autoplay="autoplay" class="mvPlay">
        您的浏览器不支持 video 标签。
      </video>
    </div>
    <div>
      <table cellpadding="0" cellspacing="0" class="mvInfo">
        <tr>
          <td class="mvTitle">{{mvData.name}}</td>
          <td><span class="artistName">{{mvData.artistName}}</span></td>
          <td class="icon">
            <el-button v-if="!isLiked" @click="liked(mvData.id)"><i class="el-icon-thumb"></i>&nbsp;点赞（{{mvDataInfo.likedCount}}）</el-button>
            <el-button v-if="isLiked" @click="liked(mvData.id)">取消点赞（{{mvDataInfo.likedCount + 1}}）</el-button>
            <el-button v-if="!isCollect" @click="collectMV(mvData.id)"><i class="el-icon-folder-add"></i>&nbsp;收藏（{{mvData.subCount}}）</el-button>
            <el-button v-if="isCollect" @click="collectMV(mvData.id)">取消收藏（{{mvData.subCount + 1}}）</el-button>
          </td>
        </tr>
        <tr>
          <td colspan="3" class="update">上传时间：{{mvData.publishTime}}</td>
        </tr>
        <tr>
          <td colspan="3" class="update">播放量：{{mvData.playCount}}</td>
        </tr>
        <tr v-if="mvData.desc">
          <td colspan="3">简介：{{mvData.desc}}</td>
        </tr>
      </table>
    </div>

    <div>
      <h2>相关推荐</h2>
      <el-row :gutter="20" type="flex" style=" flex-wrap: wrap">
        <el-col :span="6" v-for="(item,i) in mvSimiData" :key="i">
          <div class="coverPic" @click="toMVDetails(item.id)"><img :src="item.cover" :alt="item.name"></div>
          <div class="MvsName" @click="toMVDetails(item.id)">{{item.name}}</div>
          <div class="MVSonger">{{item.artistName}}</div>
          <div class="playCt"><img src="../../../assets/img/播放图标.png" alt="error"><span>{{item.playCount}}</span></div>
        </el-col>
      </el-row>
    </div>

    <div>
      <h2>评论（共{{mvDataInfo.commentCount}}条评论）</h2>
      <el-input type="textarea" :rows="4" placeholder="说说你的看法吧" v-model="textarea" resize="none"></el-input>
      <div class="postComments">
        <el-button type="primary" size="mini">发表评论</el-button>
      </div>

      <h3 v-if="hotComments.length != 0">精彩评论</h3>
      <ul class="comments" v-if="hotComments.length != 0">
        <li v-for="(item,i) in hotComments" :key="i">
          <table cellpadding="0" cellspacing="0">
            <tr>
              <td rowspan="2" class="userImg" @click="toUserDetails(item.user.userId)"><img :src="item.user.avatarUrl" :alt="item.user.nickname"></td>
              <td class="userName" @click="toUserDetails(item.user.userId)">{{item.user.nickname}}</td>
            </tr>
            <tr>
              <td class="commentTime">{{formatDate(item.time)}}</td>
            </tr>
            <tr>
              <td></td>
              <td class="commentInfo">{{item.content}}</td>
            </tr>
            <tr v-if="item.beReplied != undefined && item.beReplied == null || item.beReplied.length > 0">
              <td></td>
              <td class="commentInfo">
                <div class="replyComment">
                  <table>
                    <tr>
                      <td class="userName">{{item.beReplied[0].user.nickname}}</td>
                    </tr>
                    <tr>
                      <td class="commentInfo">{{item.beReplied[0].content}}</td>
                    </tr>
                  </table>
                </div>
              </td>
            </tr>
            <tr>
              <td></td>
              <td class="commentLiked">
                <a href="#"><i class="el-icon-thumb"></i>（{{item.likedCount}}）</a>
                <a href="#">回复</a>
              </td>
            </tr>
          </table>
        </li>
      </ul>

      <h3 v-if="comments.length != 0">最新评论</h3>
      <ul class="comments" v-if="comments.length != 0">
        <li v-for="(item,i) in comments" :key="i">
          <table cellpadding="0" cellspacing="0">
            <tr>
              <td rowspan="2" class="userImg" @click="toUserDetails(item.user.userId)"><img :src="item.user.avatarUrl" :alt="item.user.nickname"></td>
              <td class="userName" @click="toUserDetails(item.user.userId)">{{item.user.nickname}}</td>
            </tr>
            <tr>
              <td class="commentTime">{{formatDate(item.time)}}</td>
            </tr>
            <tr>
              <td></td>
              <td class="commentInfo">{{item.content}}</td>
            </tr>
            <tr v-if="item.beReplied != undefined && item.beReplied == null || item.beReplied.length > 0">
              <td></td>
              <td class="commentInfo">
                <div class="replyComment">
                  <table>
                    <tr>
                      <td class="userName">{{item.beReplied[0].user.nickname}}</td>
                    </tr>
                    <tr>
                      <td class="commentInfo">{{item.beReplied[0].content}}</td>
                    </tr>
                  </table>
                </div>
              </td>
            </tr>
            <tr>
              <td></td>
              <td class="commentLiked">
                <a href="#"><i class="el-icon-thumb"></i>（{{item.likedCount}}）</a>
                <a href="#">回复</a>
              </td>
            </tr>
          </table>
        </li>
      </ul>
      <el-pagination v-if="comments.length != 0" :page-size="20" :pager-count="7" layout="prev, pager, next" :total="mvDataInfo.commentCount" :current-page="currentPage" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getMVUrl, getMVData, getMVDataInfo, getSimiMV, getMVComments } from "../../../network/home"
import { getUserCollectMV, collectMV, getUserLiked, liked } from "../../../network/user";

export default {
  name: "MVDetail",
  data() {
    return {
      mvUrl: "",
      mvData: "",
      mvDataInfo: "",
      mvSimiData: "",
      textarea: "",
      hotComments: "",
      comments: "",
      //默认显示在第几页
      currentPage: 1,
      isCollect: "",
      isLiked: "",
    }
  },
  created() {
    this.getMVUrl(this.$route.params.id);
    this.getMVData(this.$route.params.id);
    this.getMVDataInfo(this.$route.params.id);
    this.getSimiMV(this.$route.params.id);
    this.getMVHotComments(this.$route.params.id, 0);
    this.getMVComments(this.$route.params.id, 0);
  },
  methods: {
    getMVUrl(id) {
      getMVUrl(id).then(res => {
        this.mvUrl = res.data.data.url;
      })
    },
    getMVData(id) {
      getMVData(id).then(res => {
        //console.log(res.data);
        this.mvData = res.data.data;
        this.getUserCollectMV(res.data.data.id);
        this.getUserLiked(res.data.data.id);
      })
    },
    getMVDataInfo(id) {
      getMVDataInfo(id).then(res => {
        //console.log(res.data);
        this.mvDataInfo = res.data;
      })
    },
    getSimiMV(id) {
      getSimiMV(id).then(res => {
        //console.log(res.data);
        this.mvSimiData = res.data.mvs.slice(0, 4);
      })
    },
    getUserCollectMV(MVId) {
      getUserCollectMV(localStorage.getItem("username"), MVId).then(res => {
        this.isCollect = res.data;
      })
    },
    collectMV(MVId) {
      collectMV(localStorage.getItem("username"), MVId).then(res => {
        this.isCollect = res.data;
      })
    },
    getUserLiked(likedId) {
      getUserLiked(localStorage.getItem("username"), likedId, "MV").then(res => {
        this.isLiked = res.data;
      })
    },
    liked(likedId) {
      liked(localStorage.getItem("username"), likedId, "MV").then(res => {
        this.isLiked = res.data;
      })
    },
    toMVDetails(id) {
      this.$router.push({ name: "MVDetail", params: { id: id } });
      location.reload();
    },
    toUserDetails(id) {
      this.$router.push({ name: "UserDetails", params: { id: id } });
    },
    getMVHotComments(id, offset) {
      getMVComments(id, offset).then(res => {
        //console.log(res.data);
        this.hotComments = res.data.hotComments;
      })
    },
    getMVComments(id, offset) {
      getMVComments(id, offset).then(res => {
        //console.log(res.data);
        this.comments = res.data.comments;
      })
    },
    formatDate(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      return y + '年' + MM + '月' + d + '日' + ' ' + h + ':' + m;
    },
    //获取当前页数 val为当前在第几页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getMVComments(this.$route.params.id, (val - 1) * 20);
    },
  }
}
</script>

<style scoped>
.mvPlay {
  width: 100%;
  height: 100%;
}
table {
  width: 100%;
  height: 100%;
}
.mvInfo tr td {
  padding: 10px;
}
.mvTitle {
  width: 15%;
  font-size: 1.25rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.artistName {
  color: RGB(153, 153, 153);
}
.artistName:hover {
  color: RGB(64, 158, 255);
}
.icon {
  text-align: right;
}
.update {
  font-size: 0.85rem;
  color: RGB(153, 153, 153);
}
.coverPic img {
  width: 100%;
  height: 169px;
}
.MvsName {
  font-size: 1rem;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.MvsName:hover {
  color: RGB(64, 158, 255);
}
.MVSonger {
  width: 100%;
  font-size: 1rem;
  color: RGB(153, 153, 153);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.MVSonger:hover {
  color: RGB(64, 158, 255);
}
.playCt span {
  font-size: 1rem;
  color: RGB(153, 153, 153);
}
.playCt img {
  width: 1rem;
  height: 1rem;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  padding-bottom: 20px;
}
.el-col div {
  margin-bottom: 3px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.postComments {
  text-align: right;
  margin-top: 5px;
}
.comments {
  list-style-type: none;
}
.comments li {
  margin-left: -3.2%;
  border-top: RGB(204, 204, 204) 1px solid;
  padding: 20px;
}
.userImg {
  width: 6%;
}
.userImg img {
  width: 100%;
  height: 100%;
}
.userName {
  padding-left: 20px;
  color: RGB(64, 158, 255);
}
.userName:hover {
  text-decoration: underline solid RGB(64, 158, 255);
}
.commentTime {
  padding-left: 20px;
  color: RGB(153, 153, 153);
}
.commentInfo {
  padding-left: 20px;
}
.replyComment {
  border: solid 1px RGB(222, 222, 222);
  background: RGB(242, 242, 242);
}
.commentLiked {
  text-align: right;
}
.commentLiked a {
  text-decoration: none;
  color: black;
}
.commentLiked a:hover {
  color: RGB(64, 158, 255);
}
.el-pagination {
  margin: 3% 0 2% 35%;
}
</style>